<!-- 优惠券管理 -->
<template>
  <div>
    <el-main class="base_main_content">
      <div class="base_screen_header">
        <el-button @click="add" type="primary">新增优惠券</el-button>
        <el-form :inline="true" class="base_search_form" @submit.prevent>
          <el-form-item>
            <el-input v-model="name" @keyup[native].enter="searchName" @change="searchName" placeholder="优惠券名称"
              :suffix-icon="Search" clearable />
          </el-form-item>
        </el-form>
      </div>
      <div class="base_main_header">
        <el-button type="primary" text @click="getExport">导出</el-button>
      </div>
      <DataCollectTable :data="data" :total="total" :config="config" @operationsHander="opHander.receive">
      </DataCollectTable>
    </el-main>

    <el-dialog v-model="dialogVisible" title="发放优惠券" width="400px" top="35vh" class="base_dialog">
      <el-form ref="provideFlagFormRef" :model="provideFlagForm" :rules="provideFlagRules">
        <el-form-item label="发放群体" prop="provideFlag">
          <el-radio-group v-model="provideFlagForm.provideFlag">
            <el-radio label="1">所有人</el-radio>
            <el-radio label="2">会员等级</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="submitForm">保存</el-button>
          <el-button @click="dialogVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import DataCollectTable from "@com/table/DataCollectTable.vue";
import {
  OP_KEY,
  OPERATIONS,
  operationsHander,
} from "@com/table/tableOperations";
import { $msg, $box } from "@ui/msg";
import { ref, reactive } from "vue";
import { Search } from "@element-plus/icons-vue";
import api from "@api/coupon"
import $ from "@util/base"
import useRoute from "@util/router";

const route = useRoute();

const name = ref(route.query().name || "");
const total = ref(0)
const data = ref([])

route.watchRouter("couponmanager", () => { getData() })

getData()

function getData() {
  let routeQuery = route.query()
  let params = {
    name: routeQuery.name,
    page: routeQuery.p,
    size: routeQuery.s
  }

  api.list(params, val => {
    total.value = val.total
    data.value = val.list
  })
}

function add() {
  route.push({ name: 'coupondetails', query: { type: 'add' } })
}

function getOperations() {
  return [OPERATIONS.check, OPERATIONS.grant];
}

const config = {
  showIndex: true,
  operations: {
    label: "操作",
    width: 120,
    operations: getOperations,
  },
  column: [
    {
      label: "优惠券名称",
      prop: "name",
    },
    {
      label: "已发放数量",
      prop: "provideNum",
      width: 100,
    },
    {
      label: "已核销数量",
      prop: "usedNum",
      width: 100,
    },
    {
      label: "开始时间",
      prop: "startDate",
      width: 150,
    },
    {
      label: "结束时间",
      prop: "endDate",
      width: 150,
    },
    {
      label: "优惠内容",
      prop: "couponDesc",
      width: 150,
    },
    {
      label: "创建时间",
      prop: "createTime",
      width: 100,
    },
    {
      label: "创建人",
      prop: "creator",
      width: 100,
    }
  ],
};

const opHander = operationsHander();
opHander.install(OP_KEY.check, (data) => {
  route.push({ name: 'coupondetails', query: { type: 'show', code: data.couponCode } })
});

opHander.install(OP_KEY.grant, (data) => {
  dialogVisible.value = true
  provideFlagForm.value.couponCode = data.couponCode
  resetForm()
});

function searchName(val) {
  route.replaceQuery("name", val);
}

const dialogVisible = ref(false)
const provideFlagFormRef = ref('')
const provideFlagForm = ref({
  couponCode: null,
  provideFlag: '',
})
const provideFlagRules = {
  provideFlag: [{
    required: true,
    message: '请选择发放群体',
    trigger: 'change',
  }],
}
const submitForm = () => {
  provideFlagFormRef.value.validate((valid) => {
    if (valid) {
      api.provide(provideFlagForm.value, val => {
        $msg.succ("发放优惠券成功");
        dialogVisible.value = false
        getData()
      })
    }
  })
}

const resetForm = () => {
  if (!provideFlagFormRef.value) return
  provideFlagFormRef.value.resetFields()
}

function getExport() {
  let routeQuery = route.query()
  api.export({
    name: routeQuery.name,
  }, val => {
    $.download(val.url, "优惠券列表导出")
  })
}
</script>

<style lang="scss">

</style>

